<template>
  <div class="info-main" :style="{ width: infoWidth, }">
      <!-- 标题 -->
      <span class="baseInfoHead">{{infoTitle}}</span>
      
      <div class="form">
        <el-form label-position="left" @submit.native.prevent>
          <!-- 信息内容 -->
          <el-form-item v-for="item,index in infoData" :key = "index" :label="item.label" class="infomation">
            <span v-if="item.isTime">{{item.value | dataFormat('YYYY-MM-DD HH:mm')}}</span>
            <span v-else>{{item.value}}</span>
          </el-form-item>    
  
           <!-- 描述文本框 -->
           <el-form-item  label="描述" v-if="isDescriptionTextAreaShow" class="descriptionTextArea">
              <el-input type="textarea" v-model.trim="description" resize="none"></el-input>
           </el-form-item>
           
          <!-- 信息内容 -->
          <div>
          <el-form-item v-for="(item,idx) in infoData2" :key = "idx" :label="item.label" class="infomation">
            <span>{{item.value}}</span>
          </el-form-item>    
          </div>
  
          <!-- tag显示行 -->
          <el-form-item label="标签" v-if="isTagShow">
            <span class="tagStyle">
              <div>
                <el-tag 
                  :key="tag" 
                  v-for="tag in tagList" 
                  closable 
                  :disable-transitions="false" 
                  @close="handleTagClose(tag)">
                    {{tag}}
                </el-tag>
              </div>
              <el-input 
                class="input-new-tag" 
                v-model.trim="tagContext" 
                size="small">
                <el-button class="button-new-tag" 
                  size="small" 
                  @click="handleInputContent" 
                  slot="append" 
                  icon="el-icon-plus">
                </el-button>
              </el-input>
            </span>        
           </el-form-item>     
      </el-form>
    </div>                                
  </div>
</template>

<script>
export default {
  props: {
    infoTitle: {
      default:'基本信息',
    },
    infoData:{
      default: ()=>[]
    },
    infoData2:{
      default:()=>[]
    },
    isDescriptionTextAreaShow: {
      default: false
    },
    descri:{
      default:''
    },
    isTagShow: {
      default: false
    },
    tag:{
      default: ()=>[]
    },
    infoWidth:{
      default: '500px'
    }
  },
  data(){
    return  {
      description:'',
      tagList:[],
      tagContext:'',
    }
  },
  created(){
    this.tagList = this.tag;
    this.description = this.descri;
  },
  methods: {
    // 标签删除事件
    handleTagClose(tag) {
      this.tagList = this.tagList.filter(item=>item!=tag);
    },
    // 标签新增事件
    handleInputContent(){
      let iptValue = this.tagContext
      if(iptValue && this.tagList.indexOf(iptValue) == -1){
        this.tagList.push(iptValue)
      }
      this.tagContext = ''
    }
  }
}
</script>

<style lang="less">
  
.info-main{
  box-sizing: border-box;
  height: 510px;
  border: 1px solid #e6e6e6;
  padding: 30px 0 0px 30px;
  border-radius: 2px;
    .baseInfoHead {
      display: block;
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-weight: Bold;
      font-size: 16px;
      text-align: LEFT;
      color: #131416;
      margin-left: 11px;
      margin-bottom: 20px;
    }
  .el-form-item {
    margin-left: 10px;
  }
  .el-form-item__label {
    font-family: Microsoft YaHei, Microsoft YaHei-Normal;
    font-weight: Normal;
    font-size: 12px;
    color: #808080;
    padding-right: 5px;
  }
  .el-form-item__content {
    font-family: Microsoft YaHei, Microsoft YaHei-Normal;
    font-weight: Normal;
    font-size: 12px;
    color: #131416;
    margin-left: 90px !important;
  }
  .button-new-tag {
    text-align: center;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 2px;
    i {
        font-size: 10px;
    }
  }
  .el-textarea {
    margin-top: 10px;
    width: 320px ;
    height: 100px;
    border-radius: 2px;
    font-size: 12px !important;
    .el-textarea__inner {
      width: 320px;
      height: 100px;
      border-radius: 2px;
    }
  }
  .tagStyle {
    height: 40px;
    .el-tag  {
        box-sizing: border-box;
        margin: 10px 0 10px 10px;
        height: 22px;
        line-height: 20px;
        padding: 0 8px;
        background-color: #F8F8F8;
        border-color: #E6E6E6;
        border-radius: 2px;
        color:#333333;
        &:first-child{
            margin-left: 0;
        }
        .el-tag__close {
            color:#333333;
            width: 10px;
            &:hover{
                background-color: #F8F8F8;
            }
        }
    }                       
    .input-new-tag {
        width: 240px;
        height: 28px;
        border-radius: 1px;
        .el-input__inner {
            border-radius: 2px;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        .el-input-group__append {
            width: 26px;
            padding: 0;
            text-align: center;
            border-radius: 2px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            background-color: #fff;
        }                            
        .button-new-tag {
            text-align: center;
            box-sizing: border-box;
            height: 30px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
            border-radius: 2px;
            i {
                font-size: 10px;
            }
        }
    }      
    }
}
</style>